import { useDispatch, useSelector } from 'react-redux'
import { loadTranslations } from '@/store/langSlice'

export default function LanguageSwitcher() {
  const dispatch = useDispatch()
  const { lang, loading } = useSelector((state) => state.lang)

  return (
    <div className="dropdown dropdown-end relative">
      <label tabIndex={0} className="btn btn-ghost">
        {loading ? (
          <span className="loading loading-spinner loading-xs"></span>
        ) : (
          lang.toUpperCase()
        )}
      </label>
      <ul className="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-52 z-[9999]">
        <li>
          <button onClick={() => dispatch(loadTranslations('en'))}>
            English
          </button>
        </li>
        <li>
          <button onClick={() => dispatch(loadTranslations('jp'))}>
          日本語
          </button>
        </li>
      </ul>
    </div>
  )
}